import React, { useEffect, useState } from 'react';
import { Table, Radio, Divider, Button } from 'antd';
import { useNavigate, useParams } from 'react-router';
import type { ColumnsType } from 'antd/lib/table';
import { auditList } from '../../apis/auditList'
import './../../static/css/auditList/auditList.css'
import { Pagination } from 'antd';

interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

interface IParams {
  page: number
  pageSize: number
}
var total = 0

const AuditList: React.FC = () => {
  let { id } = useParams()
  let navigate = useNavigate()

  const [params, setparams] = useState<IParams>({ page: 1, pageSize: 10 })
  const [info, setinfo] = useState([])

  // 列表
  const getdata = async () => {
    const res = await auditList(params)
    console.log(res);
    if (res.code === '00000') {
      setinfo(res.data)
      total = res.total
    }

  }

  // 跳转详情
  function godetails(text: any) {
    console.log(text);
    navigate(`/index/auditlogAdd`, { state: { info: text } })
  }

  useEffect(() => {
    getdata()
  }, [params])

  // 复选框
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record: DataType) => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  };
  const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');


  const columns: ColumnsType<DataType> = [
    {
      title: '审核人',
      dataIndex: 'username',
      align: 'center',
      render: (text: string) => <a>{text}</a>,
    },
    {
      title: '来访人',
      dataIndex: 'visitor',
      align: 'center',
    },
    {
      title: '来访人电话',
      dataIndex: 'mobile',
      align: 'center',
    },
    {
      title: '来访人车牌号',
      dataIndex: 'carnumber',
      align: 'center',

    },
    {
      title: '审核时间',
      dataIndex: 'addtime',
      align: 'center',
    },
    {
      title: '审核状态',
      align: 'center',
      dataIndex: 'status',
      render: (texe: any) => {
        if (texe === 3) {
          return <div className='tg'>终审通过</div>
        } else {
          return <div className='wtg'>审核未通过</div>
        }
      }
    },
    {
      title: '操作',
      align: 'center',
      render: (text: any) => {
        return (
          <div>
            <Button className='btn' onClick={() => godetails(text)}>详情</Button>
          </div>
        )
      }
    },
  ];
  // 分页
  const ange = (a: any, b: any) => {
    console.log(a, b);
    setparams({ ...params, page: a, pageSize: b })


  }
  return (
    <div className='box8'>
      <Radio.Group
        onChange={({ target: { value } }) => {
          setSelectionType(value);
        }}
        value={selectionType}
      >

      </Radio.Group>

      <Divider />


      <Table
        rowKey='logid'
        pagination={false}
        rowSelection={{
          type: selectionType,
          ...rowSelection,
        }}
        columns={columns}
        dataSource={info}
      />
      <Pagination
        // className 
        total={total}
        onChange={ange}
        showSizeChanger
        showQuickJumper
        showTotal={total => `一共 ${total} 条数据`}

      />
    </div>
  )
}
export default AuditList